<template>
  <div id="app">
    <h1>在线翻译</h1>
    <h5 class="text-muted">简单 / 易用 / 便捷</h5>
    <translateForm v-on:formSubmit='translateText'></translateForm>
    <TranslateOutput :translatedText="translatedText"></TranslateOutput>
  </div>
</template>

<script>
import TranslateForm from "./components/TranslateForm";
import TranslateOutput from "./components/TranslateOutput";

export default {
  name: 'app',
  components: {
    TranslateForm,
    TranslateOutput
  },
  data:function () {  
    return{
      translatedText:''
    }
  },
  methods:{
    translateText:function (text,language) {
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20190126T181248Z.fe9879668e2bb2e0.f5478b2bd22b2181258debe292906965ba91df8e&lang='+ language +'&text='+text)
      .then(Response=>{
        // console.log(Response.body.text[0]);
        this.translatedText = Response.body.text[0]
      })
    }
  }
}
</script>

<style>
  #app{
    text-align: center
  }
</style>
